﻿@{
    ViewData["Title"] = "角色管理";
    Layout = "~/Views/Shared/_LayuiTable.cshtml";
}
<script type="text/html" id="tableBar">
    {{#  if(d.MenuLevel < 3){ }}
    <a class="layui-btn layui-btn-xs" lay-event="add">增加子级</a>
    {{#  }  }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="isEnableTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="IsEnable" value="true" MenuId="{{d.Id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="IsEnableEvent" {{ d.IsEnable ? 'checked' : '' }}>
</script>
<script type="text/html" id="isApiTpl">
    {{#  if(d.IsApi == true ){ }}
    <span style="color: #F581B1;">是</span>
    {{#  } else { }}
    否
    {{#  } }}
</script>
<script type="text/html" id="isExpandTpl">
    {{#  if(d.IsExpand == true ){ }}
    <span style="color: #F581B1;">是</span>
    {{#  } else { }}
    否
    {{#  } }}
</script>

<form id="searchForm" onsubmit="return false;">
    <div class="layui-input-inline">        
        <select class="layui-input" style="width:200px" placeholder="菜单类型" name="MenuType">
            <option value="0" selected="">应用菜单</option>
            <option value="1">系统菜单</option>
            <option value="2">全部</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <a class="layui-btn layui-btn-normal" onclick="tableReload()">搜索</a>
    </div>
    <div class="layui-inline">
        <button type="reset" class="layui-btn layui-btn-danger">重置</button>
    </div>
</form>

<div style="padding:5px 0px 5px 0px;">
    <button class="layui-btn" onclick="addRoot()">增加主菜单</button>
    <button class="layui-btn" onclick="openAll(false)">折叠全部</button>
    <button class="layui-btn" onclick="openAll(true)">展开全部</button>
    <button class="layui-btn" onclick="tableReload()">刷新</button>
</div>
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
<script>
    layui.config({
        base: '../layuiadmin/layui/extend/'
    }).extend({
        treeGrid: 'treeGrid'
    });
    addLayuiApp("treeGrid");

    var editObj = null, ptable = null, treeGrid = null, tableId = 'treeTable', layer = null;
    var EditModel;
    addLayuiUseEvent(function () {
        treeGrid = layui.treeGrid;//很重要
        layer = layui.layer;
        ptable = treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , idField: 'Id'
            , url: '@ViewBag.ListUrl'
            , method: 'post'
            , cellMinWidth: 100
            , treeId: 'Id' //树形id字段名称
            , treeUpId: 'PId' //树形父id字段名称
            , treeShowName: 'MenuName' //以树形式显示的字段
            , isOpenDefault: false //节点默认是展开还是折叠【默认展开】
            , iconOpen: false //是否显示图标【默认显示】
            , contentType: 'application/json'
            , cols: [[
                { type: 'numbers' }
                , { field: 'MenuName', width: 250, title: '菜单名称' } //edit: 'text', 开启编辑
                , { field: 'MenuUrl', width: 180, title: '菜单地址' }
                , { field: 'MenuIcon', width: 150, title: '图标' }
                , { field: 'OrderNo', width: 80, edit: 'text', align: 'center', title: '排序' }
                , { field: 'IsApi', width: 90, title: '数据接口', align: 'center', templet: '#isApiTpl', unresize: true }
                , { field: 'IsExpand', width: 90, title: '是否展开',align: 'center',templet: '#isExpandTpl',unresize: true }
                , { field: 'IsEnable', width: 90, title: '是否启用', templet: '#isEnableTpl', unresize: true }
                //, { field: 'MenuLevel', width: 100, title: '菜单级别' }
                // , { field: 'Id', width: 100, title: 'id' }
                //, { field: 'PId', title: 'pid' }
                , { width: 300, title: '操作', align: 'center', toolbar: '#tableBar' }
            ]]
            , isPage: false
            , page: false
            , limit: 0
        });

        treeGrid.on('edit(' + tableId + ')', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            if (field == "OrderNo") {
                updateOrderNo(data.Id, value);
            }
        });


        treeGrid.on('tool(' + tableId + ')', function (obj) {
            if (obj.event === 'del') { //删除行
                del(obj.data);
            } else if (obj.event === "add") {//添加行
                add(obj.data);
            } else if (obj.event === "edit") {
                edit(obj.data);
            }
        });

        var form = layui.form;
        //监听操作
        form.on('switch(IsEnableEvent)', function (obj) {
            var switchState = obj.elem.checked ;
            var menuId = $(obj.elem).attr("MenuId");
            console.log(menuId, switchState);
            jqJsonPost("/api/apimenu/update",
                { Id : menuId,IsEnable:switchState},
                function (data) {

                    if (data.code == 0) {
                        layer.tips("设置成功", obj.othis);
                    } else {
                        layer.tips(data.msg, obj.othis);
                    }
                });
        });

    });

    //删除
    function del(rowData) {
        console.log(rowData);
        layer.confirm('你确定删除数据吗？请确保子级没有记录，此操作不能撤销！', function (index) {
            jqJsonPost("@ViewBag.DelUrl",
                { Id : rowData.Id},
                function (data) {
                    layer.msg(data.msg);
                    if (data.code == 0) {
                        tableReload();
                    }
                });
            return false;
        });
    }

    //打开编辑框
    function showEditView(title, url) {
        var index = layer.open({
            title: title,
            type: 2,
            content: url,
            area: ['300px', '300px'],
            maxmin: true
        });
        layer.full(index);
    }

    //增加主菜单
    function addRoot() {
        EditModel = { IsApi:"false" };
        var url = "Edit?type=add";
        showEditView("增加主菜单", url);
    }

    //添加子级
    function add(pObj) {
        var url = "Edit?type=add";
        EditModel = { PId: pObj.Id, IsApi: "false", IsExpand: false };
        showEditView("增加 "+ pObj.MenuName+" 的子级菜单", url);
    }

    //更新
    function edit(data) {
        EditModel = {
            Id: data.Id,
            PId: data.PId,
            MenuIcon:data.MenuIcon,
            MenuName: data.MenuName,
            MenuUrl: data.MenuUrl,
            IsApi: data.IsApi ? "true" : "false",
            IsExpand: data.IsExpand
        };
        var url = "Edit?type=update";
        showEditView("编辑 "+ data.MenuName, url);
    }

    //展开或折叠全部
    function openAll(isOpen) {
        treeGrid.treeOpenAll(tableId, isOpen);
    }

    function getQueryWhere() {
        var j = formSerializeJson("form");
        return j;
    }

    //重载
    function tableReload() {
        treeGrid.reload(tableId, {
            page: {
                curr: 0
            }
            , where: getQueryWhere()
            ,contentType: 'application/json'
        });
    }

    function updateOrderNo(id,orderNo) {
        jqJsonPost("/api/apimenu/updateOrder",
                { MenuId: id,OrderNo: orderNo },
                function (data) {
                    layer.msg(data.msg);
                    if (data.code == 0) {
                        //tableReload();
                    }
                });
    }
</script>